<div class="f-page f-page-is-managelist f-page-has-scheme">
    <farris-section [enableMaximize]="false" class="f-section-scheme f-section-in-managelist" [showHeader]="false">
        <app-scheme></app-scheme>
    </farris-section>
    <app-header></app-header>
    <div class="f-page-main">
        <div class="f-struct-wrapper f-utils-fill-flex-column">
            <farris-section [enableMaximize]="false" class="f-section-grid f-section-in-managelist" [fill]="true">
                <ng-template farrisSectionExtend>
                    <div class="f-section-extend-gridfilter">
                        <span><i class="f-icon f-icon-info"></i></span>
                        <p>已选择 <span class="text-info">2</span> 项</p>
                        <p>支付申请总计：36.4 万</p>
                        <button class="btn btn-link">清空</button>
                    </div>
                </ng-template>

                <farris-datagrid
                    class="f-component-grid"
                    [columns]="maingridcolumns"
                    [data]="mainGridData"
                    #dg="datagrid"
                    [idField]="'DDBH'"
                    [showLineNumber]="true"
                    [fitColumns]="false"
                    [total]="mainGridTotal"
                    [striped]="true"
                    [showCheckbox]="false"
                    [virtualized]="true"
                    [pagination]="true"
                    [fit]="true"
                    [sortName]="'DDBH'"
                    [showPageList]="true"
                    [sortOrder]="'asc'"
                    [showFooter]="true"
                    [footerHeight]="36"
                    [footerTemplate]="ft"
                >
                    <ng-template #cell2 let-ctx>
                        <div class="text-center">
                            <span class="f-icon f-icon-flag_urgent text-warning"></span>
                        </div>
                    </ng-template>
                    <ng-template #cell3 let-ctx>
                        <span class="f-pretend-link mr-2">{{ ctx.rowData['DDBH'] }}</span>
                        <span [class]="getBadgeCls(ctx.rowIndex)">通过</span>
                    </ng-template>

                    <!-- 自定义页脚模板 -->
                    <ng-template #ft>
                        <div class="f-grid-total-row">
                            <div class="f-title">当页合计</div>
                            <div class="f-content">
                                <dl class="f-grid-total-detail">
                                    <dt>未还款金额：</dt>
                                    <dd>¥ 15,236.00</dd>
                                    <dt>申请金额：</dt>
                                    <dd class="text-warning h3">¥ 35,236.00</dd>
                                </dl>
                            </div>
                        </div>
                    </ng-template>
                </farris-datagrid>
            </farris-section>
        </div>
    </div>
</div>
